
<div style="POSITION: relative" id="content">
  <h3> 使用easyUI转换HTML table到datagrid</h3>
  <div id="article_content" class="article_content">
    <p>这个示例展示,我们如何转换table到datagrid.</p>
    <p><img src="documentation/images/1344501317_7193.png" alt=""><br>
    </p>
    <p>datagrid的列信息是定义在&lt;thead&gt;标记中,数据是定义在&lt;tbody&gt;标记中,确定设置field名称给所有的数据列,请看以下示例:</p>
    <p>
    <pre name="code" class="html">&lt;table id=&quot;tt&quot; class=&quot;easyui-datagrid&quot; style=&quot;width:400px;height:auto;&quot;&gt;  
    &lt;thead&gt;  
        &lt;tr&gt;  
            &lt;th field=&quot;name1&quot; width=&quot;50&quot;&gt;Col 1&lt;/th&gt;  
            &lt;th field=&quot;name2&quot; width=&quot;50&quot;&gt;Col 2&lt;/th&gt;  
            &lt;th field=&quot;name3&quot; width=&quot;50&quot;&gt;Col 3&lt;/th&gt;  
            &lt;th field=&quot;name4&quot; width=&quot;50&quot;&gt;Col 4&lt;/th&gt;  
            &lt;th field=&quot;name5&quot; width=&quot;50&quot;&gt;Col 5&lt;/th&gt;  
            &lt;th field=&quot;name6&quot; width=&quot;50&quot;&gt;Col 6&lt;/th&gt;  
        &lt;/tr&gt;                            
    &lt;/thead&gt;                             
    &lt;tbody&gt;                              
        &lt;tr&gt;                             
            &lt;td&gt;Data 1&lt;/td&gt;              
            &lt;td&gt;Data 2&lt;/td&gt;              
            &lt;td&gt;Data 3&lt;/td&gt;              
            &lt;td&gt;Data 4&lt;/td&gt;              
            &lt;td&gt;Data 5&lt;/td&gt;              
            &lt;td&gt;Data 6&lt;/td&gt;              
        &lt;/tr&gt;                            
        &lt;tr&gt;                             
            &lt;td&gt;Data 1&lt;/td&gt;              
            &lt;td&gt;Data 2&lt;/td&gt;              
            &lt;td&gt;Data 3&lt;/td&gt;              
            &lt;td&gt;Data 4&lt;/td&gt;              
            &lt;td&gt;Data 5&lt;/td&gt;              
            &lt;td&gt;Data 6&lt;/td&gt;              
        &lt;/tr&gt;                            
        &lt;tr&gt;                             
            &lt;td&gt;Data 1&lt;/td&gt;              
            &lt;td&gt;Data 2&lt;/td&gt;              
            &lt;td&gt;Data 3&lt;/td&gt;              
            &lt;td&gt;Data 4&lt;/td&gt;              
            &lt;td&gt;Data 5&lt;/td&gt;              
            &lt;td&gt;Data 6&lt;/td&gt;              
        &lt;/tr&gt;                            
        &lt;tr&gt;                             
            &lt;td&gt;Data 1&lt;/td&gt;              
            &lt;td&gt;Data 2&lt;/td&gt;              
            &lt;td&gt;Data 3&lt;/td&gt;              
            &lt;td&gt;Data 4&lt;/td&gt;              
            &lt;td&gt;Data 5&lt;/td&gt;              
            &lt;td&gt;Data 6&lt;/td&gt;              
        &lt;/tr&gt;                            
    &lt;/tbody&gt;                             
&lt;/table&gt;  </pre>
    </p>
    <p>非常棒,你可以定义一个复杂的表头,例如:</p>
    <p>
    <pre name="code" class="html">&lt;thead&gt;  
    &lt;tr&gt;  
        &lt;th field=&quot;name1&quot; width=&quot;50&quot; rowspan=&quot;2&quot;&gt;Col 1&lt;/th&gt;  
        &lt;th field=&quot;name2&quot; width=&quot;50&quot; rowspan=&quot;2&quot;&gt;Col 2&lt;/th&gt;  
        &lt;th field=&quot;name3&quot; width=&quot;50&quot; rowspan=&quot;2&quot;&gt;Col 3&lt;/th&gt;  
        &lt;th colspan=&quot;3&quot;&gt;Details&lt;/th&gt;  
    &lt;/tr&gt;  
    &lt;tr&gt;  
        &lt;th field=&quot;name4&quot; width=&quot;50&quot;&gt;Col 4&lt;/th&gt;  
        &lt;th field=&quot;name5&quot; width=&quot;50&quot;&gt;Col 5&lt;/th&gt;  
        &lt;th field=&quot;name6&quot; width=&quot;50&quot;&gt;Col 6&lt;/th&gt;  
    &lt;/tr&gt;                            
&lt;/thead&gt;  </pre>
    现在你可以看见,复杂表头已经创建:
    </p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><img src="documentation/images/1344501563_4915.png" alt=""><br>
      </span></span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></span></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载 EasyUI示例代码:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://jquery-easyui.googlecode.com/svn/trunk/share/tutorial/datagrid/easyui-datagrid-demo1.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-datagrid-demo.zip</a></div>
    <br>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>